<template>
  <div class="table-page-search-wrapper">
    <el-form :inline="true" :model="form" label-width="60px" ref="form">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item :label=" mdl.planType === 1 ? '区域' : '部门'">
            <area-select
              v-if="mdl.planType === 1"
              :selectValue="form.areaId"
              ref="areaSelect"
              @select="value => handleSelect('areaId', value)"
              v-model="form.areaId"
            />
            <dept-select
              v-if=" mdl.planType === 2"
              :selectValue="form.deptId"
              ref="deptSelect"
              @select="value => handleSelect('deptId', value)"
              v-model="form.deptId"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="盘点人">
            <user-select
              ref="userSelect"
              v-model="form.checkUserName"
              @select="value => handleSelect('checkUserName', value)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" class="mr20" @click.stop="handleSearch">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import AreaSelect from '@/views/assetsNew/components/AreaSelect'
import DeptSelect from '@/components/DeptSelect'
import UserSelect from '../../components/UserSelect'
import { getAreaTree } from '@/api/assets'
import pick from 'lodash.pick'

export default {
  components: {
    AreaSelect,
    UserSelect,
    DeptSelect
  },
  data() {
    return {
      form: {
        deptId: null,
        areaId: null,
        checkUserName: null
      },
      treeData: [],
      mdl: {}
    }
  },
  mounted() {
    getAreaTree().then(res => {
      console.log('tree res', res)
      this.treeData = res.data
    })
  },
  methods: {
    edit(obj) {
      this.mdl = Object.assign({}, obj)
    },
    handleSelect(key, value) {
      this.$set(this.form, key, value.id)
    },
    handleSearch() {
      if (this.form.areaId || this.form.checkUserName) {
        this.$emit('search', this.form)
      } else {
        this.$message.error('请至少选择一个搜索条件')
      }
    },
    handleReset() {
      // this.form.resetField()
      this.$refs.areaSelect.reset()
      this.$refs.userSelect.reset()
      this.$emit('search', {})
    }
  }
}
</script>